TwilioのProgrammable ChatとCloudinaryを組み合わせて動画を送信する

前回はChatのMediaMessageを使って動画を投稿してみました。

TwilioのProgrammable Chatで動画を送信してみる

現時点では、MediaMessageはメールの添付ファイルのようなもので、ファイルをアップロード・ダウンロードできるだけの機能です。MediaMessageを使う場合の課題として、ファイルサイズの制限や、コンテンツの配信・変換など課題がありました。そこで今回は、MediaMessageの代わりにCloudinaryにファイルをアップロードして動画を送信する方法を検証してみました。

やってみる

Cloudinaryのセットアップ

• Cloudinaryのアカウントを作成します。cloud nameを控えておきます。
• SettingsのUploadから、Unsigned uploadingを有効化します。（今回はブラウザから直接アップロードするため、この設定を有効にします。）そして作成されたpreset nameを控えておきます。

動画の送信・表示機能を追加する

前回のサンプルプロジェクトに、動画の送信・表示機能を加えました。

diffはこちらを参照してください

※ preset name などハードコーディングしたままコミットしていますが、削除済みなのでセットアップ手順に従い取得してください。

シーケンスは以下のようになります。

1. ブラウザで選択された動画を、Cloudinaryにアップロードします。
2. Cloudinaryからのレスポンスにあるpublic_idを、MessageのAttributesに設定して、Programmable ChatにMessageを送信します。
3. その後、Programmable ChatからmessageAddedイベントを受信し、MessageにあるAttributesからpublic_idを取り出し、URLを組み立てて動画を表示します。

動かしているところ。（近所でリスを発見した時の動画）

アクセス制限

Chatはプライベートなものなので、動画のURLは恒久的なものではなく一時的な方が望ましいと思います。Cloudinaryで一時的なURLを発行するためにはToken-based authenticationまたはCookie-based authentication（今回のケースだとToken-basedの方を使うと思う）という機能を使います。これらを使うにはAdvanced以上のプランが必要なので今回は試していませんが、ざっくりシーケンスで示すと以下のようになります。Secretsを扱うのでサーバ側の処理が必要となります。Amazon S3のPresignedUrlと同じような仕組みですね。

感想

TwilioのProgrammable Chatと他のサービスを組み合わせて使うことで、提供するサービスの機能を拡張できることがわかりました。

Cloudinaryの強みはやはり画像・動画の変換や配信の最適化にあります。今回のサンプルプロジェクトでもCloudinaryの変換機能を使って、チャット画面にサムネイル画像（URLの末尾を.jpgにするだけ）を表示したり、動画をリサイズしたりしています。

一方で、Cloudinaryはなかなかお高いサービスなので、そこまで高機能は必要ないという場合であれば、Amazon S3などのストレージサービスを利用するのも良さそうです。